<template>
  <px-dialog v-model="visible" width="80%" @close="closeDialog">
    <px-form ref="queryRef" class="custom-form-ui-new" :model="queryParams" inline label-width="90px">
      <px-form-item label="设备名称">
        <px-input v-model="queryParams.eqpName" placeholder="请输入设备名称/设备编号" clearable @keyup.enter="queryTable" />
      </px-form-item>
      <px-form-item label="厂区">
        <px-select v-model="queryParams.facCode" placeholder="请选择厂区" clearable filterable @change="handleChangeFac">
          <px-option v-for="item in facList" :key="item.id" :label="item.name" :value="item.value" />
        </px-select>
      </px-form-item>

      <px-form-item label="设备位置" prop="positionCodes">
        <px-cascader
          ref="cascaderRef"
          v-model="queryParams.positionCodes"
          filterable
          clearable
          :options="positionList"
          :props="cascaderefaultProps"
          placeholder="请选择设备位置"
          @change="cascaderRef.togglePopperVisible()"
        />
      </px-form-item>

      <px-form-item>
        <px-button type="primary" @click="queryTable">查询</px-button>
        <px-button @click="resetQuery">重置</px-button>
      </px-form-item>
    </px-form>

    <px-table v-loading="loading" :data="equipTypeList" height="calc(100vh - 500px)" border @selection-change="handleSelectionChange">
      <px-table-column type="selection" width="55" align="center" />
      <px-table-column label="序号" type="index" width="55" align="center" fixed="left" />
      <px-table-column min-width="180" show-overflow-tooltip label="平台编码" align="center" fixed="left" prop="platformCode" />
      <px-table-column min-width="150" show-overflow-tooltip label="设备名称" align="center" prop="eqpName" />
      <px-table-column min-width="120" show-overflow-tooltip label="厂商" align="center" prop="manufacturer" />
      <px-table-column min-width="80" show-overflow-tooltip label="IP地址	" align="center" prop="ipAddr" />
      <px-table-column min-width="150" show-overflow-tooltip label="设备状态" align="center" prop="eqpStatus" />
      <px-table-column min-width="120" show-overflow-tooltip label="设备序列号" prop="eqpIsin" />
      <px-table-column min-width="120" show-overflow-tooltip label="安装位置" prop="installPosition" />
      <px-table-column min-width="120" show-overflow-tooltip label="监视方向" prop="monitorDirection" />
      <px-table-column min-width="120" show-overflow-tooltip label="位置code" prop="positionCode" />
      <px-table-column min-width="120" show-overflow-tooltip label="路径" prop="path" />
      <px-table-column min-width="120" show-overflow-tooltip label="厂区" prop="facCode">
        <template #default="scope">
          <px-tag effect="plain">
            {{ facMap[scope.row.facCode] }}
          </px-tag>
        </template>
      </px-table-column>
    </px-table>

    <pagination v-show="total > 0" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" :total="total" @pagination="queryTable" />

    <template #footer>
      <span class="dialog-footer">
        <px-button @click="closeDialog">取消</px-button>
        <px-button type="primary" @click="confirm()">确定</px-button>
      </span>
    </template>
  </px-dialog>
</template>

<script setup lang="ts">
import { queryCurrentClassList, queryDictData } from "@/api/common";
import { getEquipNameSelect } from "@/api/equip/archive";
import { queryCameraList } from "@/api/visual/visualConfig";

import { onMounted, reactive, ref, toRefs, watch } from "vue";
import { getTableData } from "@/api/system/positionManage";
const cascaderRef = ref();
const cascaderefaultProps = {
  children: "children",
  label: "name",
  value: "code",
  checkStrictly: true
};
const positionList = ref([]);

const visible = defineModel("visible");
const props = defineProps(["positionCode"]);
const emits = defineEmits(["close", "confirm"]);

const loading = ref(true);
const total = ref(0);

const data = reactive<Record<string, any>>({
  queryParams: {
    pageNum: 1,
    pageSize: 20
  },
  selectIds: [], // 选中的数据
  equipTypeList: [], // 列表数据

  facList: [], // 厂区下拉框
  facMap: {},
  classNameList: [], // 科室下拉框
  systemList: [], // 系统下拉框
  categoryList: [], // 设备总称下拉框
  typeIdList: [], // 设备类型下拉框
  modelIdList: [] // 设备型号下拉框
});

const {
  equipTypeList,
  queryParams,
  selectIds,

  facList,
  facMap,
  classNameList,
  systemList,
  categoryList,

  modelIdList
} = toRefs(data);
onMounted(async () => {
  // queryTable();
  queryClassNameSelect();
  positionList.value = (await getTableData({})) as [];
});
watch(
  () => visible.value,
  newVal => {
    if (newVal) {
      queryTable();
    }
  }
);

// 搜索项目下拉框
const queryClassNameSelect = async () => {
  facList.value = await queryDictData({ typeCode: "factoryArea" });
  if (facList.value) {
    facList.value.forEach(item => {
      facMap.value[item.value] = item.name;
    });
  }
  classNameList.value = await queryCurrentClassList();
  categoryList.value = await getEquipNameSelect({});
};

// 改变厂区，清空系统
const handleChangeFac = () => {};

const queryTable = async () => {
  try {
    loading.value = true;

    const res = await queryCameraList(queryParams.value);
    equipTypeList.value = res?.data || [];
    total.value = res?.total;
    loading.value = false;
  } catch (error) {
    loading.value = false;
  }
};
/** 重置按钮操作 */
function resetQuery() {
  queryParams.value = {
    pageNum: queryParams.value.pageNum,
    pageSize: queryParams.value.pageSize
  };

  queryTable();
}

/** 多选框选中数据 */
const handleSelectionChange = (val: any) => {
  selectIds.value = [];
  val.forEach((item: any) => {
    if (item.eqpIsin) {
      selectIds.value.push(item.eqpIsin);
    }
  });
};

function closeDialog() {
  visible.value = false;
}
const confirm = async () => {
  emits("confirm", selectIds.value);
};
</script>
